DAY25：使用 useFetch 進行數據獲取

useFetch 是一個可組合項，意味著可以直接在 setup 函數、插件或路由中調用它。它返回具有反應性的可組合項，並處理將響應添加到 Nuxt 負載中，這樣當頁面在客戶端載入時，可以在不重新獲取數據的情況下從服務器傳遞數據。

以下是 useFetch 的簽名和參數說明：

function useFetch<DataT, ErrorT>(
  url: string | Request | Ref<string | Request> | () => string | Request,
  options?: UseFetchOptions<DataT>
): Promise<AsyncData<DataT, ErrorT>>

type UseFetchOptions<DataT> = {
  key?: string
  method?: string
  query?: SearchParams
  params?: SearchParams
  body?: RequestInit['body'] | Record<string, any>
  headers?: Record<string, string> | [key: string, value: string][] | Headers
  baseURL?: string
  server?: boolean
  lazy?: boolean
  immediate?: boolean
  default?: () => DataT
  transform?: (input: DataT) => DataT
  pick?: string[]
  watch?: WatchSource[] | false
}

type AsyncData<DataT, ErrorT> = {
  data: Ref<DataT | null>
  pending: Ref<boolean>
  refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
  execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
  error: Ref<ErrorT | null>
  status: Ref<AsyncDataRequestStatus>
}

interface AsyncDataExecuteOptions {
  dedupe?: boolean
}

type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'

使用 useFetch，您可以輕鬆進行數據獲取，它提供了各種選項，包括 URL、請求方法、查詢參數、請求體、標頭等。您可以使用 onRequest 和 onResponse 等拦截器進行自定義處理。此外，它還提供了關於數據狀態的信息，例如是否正在請求中、數據是否成功、是否發生了錯誤等。

以下是一個示例，展示了如何使用 useFetch：

const route = useRoute()

const { data, pending, error, refresh } = await useFetch(`https://api.nuxtjs.dev/mountains/${route.params.slug}`, {
  pick: ['title']
})

您還可以使用 query 選項添加查詢搜索參數，如下所示：

const param1 = ref('value1')
const { data, pending, error, refresh } = await useFetch('https://api.nuxtjs.dev/mountains', {
  query: { param1, param2: 'value2' }
})

useFetch 是一個強大的數據獲取工具，讓您可以更輕鬆地處理數據，並根據需要進行自定義處理。